/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-05-18 10:37:50
 * @LastEditors: cuidm
 * @LastEditTime: 2022-08-25 10:23:33
 */
export const G6ToolBar = function (G6, setShowHelp) {
  return new G6.ToolBar({
    getContent () {
      /* 这里必须是 ul li */
      return `
        <ul class="g6-component-toolbar">
          <li class="t-iconfont icon-zoom-in" code="zoomIn" title="放大"></li>
          <li class="t-iconfont icon-zoom-out" code="zoomOut" title="缩小"></li>
          <li class="t-iconfont icon-1x" code="defaultSize" title="1倍大小"></li>
          <li class="t-iconfont icon-reset" code="relocation" title="重定位"></li>
          <li class="t-iconfont icon-why" code="graphHelp" title="帮助"></li>
      </ul>
    `;
    },
    handleClick (code, graph) {
      if(typeof toolBarHandles(graph)[code] == "function") {
        toolBarHandles(graph, setShowHelp)[code]();
      }
    },
  });
};

const toolBarHandles = (graph, setShowHelp)=> {
  return {
    defaultSize () {
      graph.zoomTo(1);
      graph.fitCenter();
    },
    // 缩小
    zoomOut () {
      graph.zoom(0.9);
    },
    // 放大
    zoomIn () {
      graph.zoom(1.1);
    },
    relocation() {
      graph.fitCenter();
    },
    graphHelp () {
      setShowHelp(true);
    },
    dagreTB () {
      graph.updateLayout({
        type: 'dagre',
        rankdir: 'TB',
        nodesepFunc: () => 30,
        ranksepFunc: () => 60,
      });
      graph.render();
      graph.fitCenter();
    },
    dagreBT () {
      graph.updateLayout({
        type: 'dagre',
        rankdir: 'BT',
        nodesepFunc: () => 30,
        ranksepFunc: () => 60,
      });
      graph.render();
      graph.fitCenter();
    },
    dagreLR () {
      graph.updateLayout({
        type: 'dagre',
        rankdir: 'LR',
        nodesepFunc: () => 50,
        ranksepFunc: () => 60,
      });
      graph.render();
      graph.fitCenter();
    },
    dagreRL () {
      graph.updateLayout({
        type: 'dagre',
        rankdir: 'RL',
        nodesepFunc: () => 30,
        ranksepFunc: () => 60,
      });
      graph.render();
      graph.fitCenter();
    },
  };
} 

export const G6Menu = function (G6,handles = {}, isEdit) {
  return new G6.Menu({
    offsetX: 20,
    offsetY: -10,
    className: "g6-component-contextmenu-reset",
    shouldBegin (e) {
      return true;
    },
    getContent (e) {
      const itemType = e.item.getType();
      const model = e.item.getModel();
      // 右键菜单命令
      let commands = null;
      if(itemType == "node") {
        commands = [
          {
            command: 'queryDetail',
            name:    '查看详情',
          },
        ];
      } else {
        if(!isEdit) return;
        if(model.associateType == "cm_mainline") {
          // 拓扑组成内置关系不可删除
          if(model.woIsSystem) return;
          commands = [
            {
              command: 'deleteMainLine',
              name:    '删除关联',
            },
          ];
        } else {
          commands = [
            {
              command: 'editRelation',
              name:    '编辑关联',
            },
            {
              command: 'deleteRelation',
              name:    '删除关联',
            },
          ];
        }
      }
      if(!commands) return "";
      // 节点
      let menus = '<div class="all-box">';
      commands.forEach(item => {
        menus += `<p class="menu-item" command="${item.command}">${item.name}</p>`;
      });
      menus += `</div>`;
      return menus;
    },
    handleMenuClick (target, item) {
      const command = target.getAttribute('command');
      if(typeof handles[command] == "function")
          handles[command](item);
    },
    itemTypes: ['node', 'edge'],
  });
};

export const G6Legend = function (G6, data, filterFunctions) {
  return new G6.Legend({
    data,
    align: 'center',
    layout: 'vertical',
    position: 'top-left',
    vertiSep: 12,
    horiSep: 20,
    offsetY: 0,
    padding: [4, 16, 8, 16],
    containerStyle: {
        fill: 'transparent',
        lineWidth: 0
    },
    titleConfig: {
        position: 'left',
        offsetX: 0,
        offsetY: 12,
    },
    filter: {
        enable: true,
        multiple: true,
        trigger: 'click',
        graphActiveState: 'activeByLegend',
        graphInactiveState: 'inactiveByLegend',
        filterFunctions
    }
    });
}
